<template>
  <div>
    <div id="charts" style="width: 100%; height: 600%"></div>
    <div class="messageBoard">
      <div v-for="item in dataList" :key="item.time" class="item">
        <div class="time">{{ item.time }}</div>
        <div class="content">
          {{ item.sourceCity }} => {{ item.destinationCity }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "../../assets/js/china";
import echarts from "echarts";
import { mapState } from "vuex";
import "../../../node_modules/echarts/map/js/china.js"; // 引入中国地图数据
import ipdb from "ipdb";
import qqwry from "../../../node_modules/qqwry.ipdb/index.js";
export default {
  data() {
    return {
      jishiqi: null,
      dataList: [],
    };
  },
  computed: {
    ...mapState(["sessionId", "PACKET"]),
  },
  created() {},
  mounted() {
    this.drawCharts();
    if (!this.sessionId) {
      setTimeout(() => {
        this.sendMessage();
      }, 200);
    } else {
      this.sendMessage();
    }


    this.jishiqi = setInterval(()=>{
      // if(!this.PACKET) {
      
      // }
      this.getData()


      // this.getTimeData()
    }, 1000);
  },
  beforeDestroy() {
    this.$http({
      method: "delete",
      url: `/resource/dataPackage/8080/${this.sessionId}`,
      params: {
        sessionId: this.sessionId,
      },
    });

    clearInterval(this.jishiqi);
  },
  methods: {
    sendMessage() {
      this.$http({
        method: "GET",
        url: `/resource/dataPackage/8080/${this.sessionId}`,
        // params:{
        //   sessionId:this.sessionId,
        //   port:8080
        // }
      });
    },
    getData() {
      console.log(this.PACKET);
      this.dataList.push(this.PACKET);
      var scrollDom = document.getElementById("messageBoard");
      scrollDom.scrollTop = scrollDom.scrollHeight;
    },
    // 随机生成一个数据
    randomData() {
      return Math.round(Math.random() * 300);
    },

    drawCharts() {
      // 数据
      var geoCoordMap = {
        上海: [121.4648, 31.2891],
        东莞: [113.8953, 22.901],
        东营: [118.7073, 37.5513],
        中山: [113.4229, 22.478],
        临汾: [111.4783, 36.1615],
        临沂: [118.3118, 35.2936],
        丹东: [124.541, 40.4242],
        丽水: [119.5642, 28.1854],
        新疆: [86.9236, 41.5883],
        佛山: [112.8955, 23.1097],
        保定: [115.0488, 39.0948],
        甘肃: [103.9901, 36.3043],
        北京: [116.4551, 40.4539],
        北海: [109.314, 21.6211],
        江苏: [120.2062, 32.9208],
        广西: [108.479, 24.1152],
        江西: [116.0046, 28.6633],
        南通: [121.1023, 32.1625],
        厦门: [118.1689, 24.6478],
        台州: [121.1353, 28.6688],
        安徽: [117.29, 32.0581],
        内蒙古: [111.4124, 41.4901],
        咸阳: [108.4131, 34.8706],
        黑龙江: [127.9688, 46.868],
        唐山: [118.4766, 39.6826],
        嘉兴: [120.9155, 30.6354],
        大同: [113.7854, 39.8035],
        天津: [117.4219, 39.4189],
        山西: [112.3352, 37.9413],
        威海: [121.9482, 37.1393],
        宁波: [121.5967, 29.6466],
        宝鸡: [107.1826, 34.3433],
        宿迁: [118.5535, 33.7775],
        // '江苏': [119.3000,31.5582],
        广东: [114.5107, 23.8196],
        廊坊: [116.521, 39.0509],
        延安: [109.1052, 36.4252],
        张家口: [115.1477, 40.8527],
        徐州: [117.5208, 34.3268],
        德州: [116.6858, 37.2107],
        惠州: [114.6204, 23.1647],
        四川: [103.9526, 30.7617],
        扬州: [119.4653, 32.8162],
        承德: [117.5757, 41.4075],
        西藏: [91.1865, 30.1465],
        无锡: [120.3442, 31.5527],
        日照: [119.2786, 35.5023],
        云南: [101.9199, 25.0663],
        浙江: [119.5313, 29.8773],
        枣庄: [117.323, 34.8926],
        柳州: [109.3799, 24.9774],
        株洲: [113.5327, 27.0319],
        湖北: [113.0896, 31.3628],
        汕头: [117.1692, 23.3405],
        江门: [112.6318, 22.1484],
        辽宁: [123.1238, 42.1216],
        沧州: [116.8286, 38.2104],
        河源: [114.917, 23.9722],
        泉州: [118.3228, 25.1147],
        泰安: [117.0264, 36.0516],
        泰州: [120.0586, 32.5525],
        山东: [117.1582, 36.8701],
        济宁: [116.8286, 35.3375],
        海口: [110.3893, 19.8516],
        淄博: [118.0371, 36.6064],
        淮安: [118.927, 33.4039],
        深圳: [114.5435, 22.5439],
        清远: [112.9175, 24.3292],
        温州: [120.498, 27.8119],
        渭南: [109.7864, 35.0299],
        湖州: [119.8608, 30.7782],
        湘潭: [112.5439, 27.7075],
        滨州: [117.8174, 37.4963],
        潍坊: [119.0918, 36.524],
        烟台: [120.7397, 37.5128],
        玉溪: [101.9312, 23.8898],
        珠海: [113.7305, 22.1155],
        盐城: [120.2234, 33.5577],
        盘锦: [121.9482, 41.0449],
        河北: [115.4995, 38.6006],
        福建: [118.0543, 26.5222],
        秦皇岛: [119.2126, 40.0232],
        绍兴: [120.564, 29.7565],
        聊城: [115.9167, 36.4032],
        肇庆: [112.1265, 23.5822],
        舟山: [122.2559, 30.2234],
        苏州: [120.6519, 31.3989],
        莱芜: [117.6526, 36.2714],
        菏泽: [115.6201, 35.2057],
        营口: [122.4316, 40.4297],
        葫芦岛: [120.1575, 40.578],
        衡水: [115.8838, 37.7161],
        衢州: [118.6853, 28.8666],
        青海: [97.4038, 35.8207],
        陕西: [109.1162, 34.2004],
        贵州: [106.6992, 26.7682],
        连云港: [119.1248, 34.552],
        邢台: [114.8071, 37.2821],
        邯郸: [114.4775, 36.535],
        河南: [113.4668, 34.6234],
        鄂尔多斯: [108.9734, 39.2487],
        重庆: [107.7539, 30.1904],
        金华: [120.0037, 29.1028],
        铜川: [109.0393, 35.1947],
        宁夏: [106.3586, 38.1775],
        镇江: [119.4763, 31.9702],
        吉林: [125.8154, 44.2584],
        湖南: [111.8823, 28.2568],
        长治: [112.8625, 36.4746],
        阳泉: [113.4778, 38.0951],
        青岛: [120.4651, 36.3373],
        韶关: [113.7964, 24.7028],
        海南: [109.85, 19.7028],
        台湾: [120.7964, 24.1528],
      };

      var BJData = [
        [
          {
            name: "海南",
          },
        ],
        [
          {
            name: "台湾",
          },
        ],
        [
          {
            name: "河北",
          },
        ],
        [
          {
            name: "青海",
          },
        ],
        [
          {
            name: "西藏",
          },
        ],
        [
          {
            name: "山东",
          },
        ],
        [
          {
            name: "宁夏",
          },
        ],
        [
          {
            name: "山西",
          },
        ],
        [
          {
            name: "陕西",
          },
        ],
        [
          {
            name: "安徽",
          },
        ],
        [
          {
            name: "江西",
          },
        ],
        [
          {
            name: "广东",
          },
        ],
        [
          {
            name: "黑龙江",
          },
        ],
        [
          {
            name: "吉林",
          },
        ],
        [
          {
            name: "辽宁",
          },
        ],
        [
          {
            name: "湖北",
          },
        ],
        [
          {
            name: "浙江",
          },
        ],
        [
          {
            name: "福建",
          },
        ],
        [
          {
            name: "重庆",
          },
        ],
        [
          {
            name: "宁夏",
          },
        ],
        [
          {
            name: "贵州",
          },
        ],
        [
          {
            name: "湖南",
          },
        ],
        [
          {
            name: "甘肃",
          },
        ],
        [
          {
            name: "四川",
          },
        ],
        [
          {
            name: "云南",
          },
        ],
        [
          {
            name: "江苏",
          },
        ],

        [
          {
            name: "北京",
            value: this.randomData(),
          },
          {
            name: "青岛",
          },
        ],
        [
          {
            name: "青岛",
            value: this.randomData(),
          },
          {
            name: "北京",
          },
        ],
        [
          {
            name: "北京",
            value: this.randomData(),
          },
          {
            name: "深圳",
          },
        ],
        [
          {
            name: "深圳",
            value: this.randomData(),
          },
          {
            name: "北京",
          },
        ],
        [
          {
            name: "青岛",
            value: this.randomData(),
          },
          {
            name: "深圳",
          },
        ],

        [
          {
            name: "深圳",
            value: this.randomData(),
          },
          {
            name: "青岛",
          },
        ],
        // [
        //   {
        //     name: "上海",
        //     value: this.randomData(),
        //   },
        //   {
        //     name: "四川",
        //   },
        // ],
        // [
        //   {
        //     name: "北京",
        //     value: this.randomData(),
        //   },
        //   {
        //     name: "广东",
        //   },
        // ],
        // [
        //   {
        //     name: "上海",
        //     value: this.randomData(),
        //   },
        //   {
        //     name: "江苏",
        //   },
        // ],
        // [
        //   {
        //     name: "广西",
        //     value: this.randomData(),
        //   },
        //   {
        //     name: "上海",
        //   },
        // ],

        // [
        //   {
        //     name: "北京",
        //     value: this.randomData(),
        //   },
        //   {
        //     name: "四川",
        //   },
        // ],
        // [
        //   {
        //     name: "内蒙古",
        //     value: this.randomData(),
        //   },
        //   {
        //     name: "江苏",
        //   },
        // ],
      ];

      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("charts"));

      var series = [
        {
          type: "map",
          map: "china",
          zoom: 1.152,
          // top: '30',
          zlevel: 1,
          left: "center",
          align: "right",
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            },
          },
          itemStyle: {
            normal: {
              borderColor: "#ccc", //省市边界线
              shadowColor: "rgba(166, 230, 236, 0.6)",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 120,
            },
            emphasis: {
              areaColor: "#4aafde",
              borderColor: "red",
            },
          },
          data: [
            {
              name: "北京",
              value: 400,
            },
            {
              name: "上海",
              value: 350,
            },
            {
              name: "天津",
              value: 300,
            },
            {
              name: "重庆",
              value: 200,
            },
            {
              name: "广东",
              value: 300,
            },
            {
              name: "广西",
              value: 10,
            },
            {
              name: "湖南",
              value: 200,
            },
            {
              name: "湖北",
              value: 300,
            },
            {
              name: "河南",
              value: 129,
            },
            {
              name: "河北",
              value: 390,
            },
            {
              name: "山东",
              value: 200,
            },
            {
              name: "山西",
              value: 60,
            },
            {
              name: "黑龙江",
              value: 400,
            },
            {
              name: "吉林",
              value: 201,
            },
            {
              name: "辽宁",
              value: 30,
            },
            {
              name: "内蒙古",
              value: 490,
            },
            {
              name: "新疆",
              value: 200,
            },
            {
              name: "西藏",
              value: 30,
            },
            {
              name: "宁夏",
              value: 50,
            },
            {
              name: "甘肃",
              value: 30,
            },
            {
              name: "云南",
              value: 30,
            },
            {
              name: "陕西",
              value: 30,
            },
            {
              name: "青海",
              value: 30,
            },
            {
              name: "贵州",
              value: 30,
            },
            {
              name: "福建",
              value: 220,
            },
            {
              name: "江西",
              value: 30,
            },
            {
              name: "四川",
              value: 210,
            },
            {
              name: "江苏",
              value: 140,
            },
            {
              name: "安徽",
              value: 30,
            },
            {
              name: "浙江",
              value: 333,
            },
            {
              name: "海南",
              value: 500,
            },
            {
              name: "台湾",
              value: 30,
            },
            {
              name: "南海诸岛",
              value: 0,
            },
          ],
        },
      ];
      BJData.forEach(function (item, i) {
        if (item.length === 1) {
          series.push({
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 2,
            label: {
              normal: {
                show: true,
                position: "bottom", //显示位置
                offset: [0, 0], //偏移设置
                color: "#fff",
                formatter: "{b}", //圆环显示文字
                fontWeight: "lighter",
                fontSize: 10,
              },
              emphasis: {
                show: true,
              },
            },
            symbol: "circle",
            symbolSize: function (val) {
              return 0.0001; //圆环大小
            },
            itemStyle: {
              normal: {
                color: "#fff",
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            data: [
              {
                name: item[0].name,
                value: geoCoordMap[item[0].name],
              },
            ],
          });
        } else {
          series.push(
            {
              type: "lines",
              zlevel: 2,
              animationDuration: function (idx) {
                // 越往后的数据延迟越大
                return idx * 400;
              },
              animationDelay: function (idx) {
                // 越往后的数据延迟越大
                return idx * 100;
              },
              effect: {
                show: true,
                color: "#fff",
                period: 2, //箭头指向速度，值越小速度越快
                trailLength: 0.5, //特效尾迹长度[0,1]值越大，尾迹越长重
                symbol: "circle", //箭头图标
                symbolSize: 2, //图标大小
                loop: true, //是否循环
                delay: function (idx) {
                  return Math.round(Math.random() * 3000);
                },
              },
              lineStyle: {
                normal: {
                  color: "red",
                  width: 0, //尾迹线条宽度
                  opacity: 0, //尾迹线条透明度
                  curveness: 0.4, //尾迹线条曲直度
                },
              },
              data: [
                [
                  {
                    coord: geoCoordMap[item[0].name],
                    value: item[0].value,
                  },
                  {
                    coord: geoCoordMap[item[1].name],
                  },
                ],
              ],
            },
            {
              type: "effectScatter",
              coordinateSystem: "geo",
              name: item[0].name,
              zlevel: 5,
              rippleEffect: {
                color: "red",
                //涟漪特效
                period: 4, //动画时间，值越小速度越快
                brushType: "fill", //波纹绘制方式 stroke, fill
                scale: 10, //波纹圆环最大限制，值越大波纹越大
              },
              label: {
                normal: {
                  show: true,
                  position: "bottom", //显示位置
                  offset: [0, 4], //偏移设置
                  fontWeight: "lighter",
                  fontSize: 10,
                  color: "#fff",
                  formatter: "{b}", //圆环显示文字
                },
                emphasis: {
                  show: false,
                },
              },
              symbol: "circle",
              symbolSize: 4,
              itemStyle: {
                color: "red",
                normal: {
                  color: "red",
                  show: true,
                },
                emphasis: {
                  show: true,
                },
              },
              data: [
                {
                  name: item[0].name,
                  value: geoCoordMap[item[0].name].concat([item[0].value]),
                },
              ],
            }
          );
        }
      });

      var option = {
        title: {
          left: "center",
          top: "40px",
          textStyle: {
            color: "#fff",
          },
        },
        backgroundColor: "#0e2832",
        visualMap: {
          //图例值控制
          show: true,
          min: 0,
          max: 500,
          inRange: {
            color: ["#F9EFA7", " #D23943"], // 控制颜色渐变的范围
          },
          calculable: true, // 出现滑块
        },
        geo: {
          map: "china",
          show: false,
          roam: true, //是否允许缩放
          layoutCenter: ["50%", "50%"], //地图位置
          layoutSize: "120%",
          itemStyle: {
            normal: {
              show: "true",
              color: "#0e2832", //地图背景色
              borderWidth: 2,
              borderColor: "#a7e4e6", //省市边界线
              shadowColor: "rgba(166, 230, 236, 0.6)",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 120,
            },
            emphasis: {
              show: "true",
              color: "rgba(255, 43, 61, .9)", //悬浮背景
            },
          },
        },
        // legend: {
        //     orient: 'vertical',
        //     top: '30',
        //     left: 'center',
        //     align: 'right',
        //     data: [
        //     ],
        //     textStyle: {
        //         color: '#fff',
        //         fontSize: 20,
        //     },
        //     itemWidth: 50,
        //     itemHeight: 30,
        //     selectedMode: 'multiple'
        // },
        series: series,
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>


<style lang="less" scoped>
.messageBoard {
  height: 75%;
  width: 15%;
  background: white;
  float: right;
  position: absolute;
  top: 100px;
  right: 40px;
  opacity: 50%;
  font-size: 12px;
  overflow: auto;
  z-index: 999;
  .item {
    margin-bottom: 5px;
    .time {
      color: #ffd04b;
    }
  }
}
.messageBoard::-webkit-scrollbar {
  display: none; /*隐藏滚动条*/
}
// #charts{

// }
</style>
